<template>
	<view>
		<nav-bar-sub></nav-bar-sub>
		<view class="pageWrap" v-for="(item,index) in this.leftinfo" :key="index" v-if="index === select">
			<u-tabs :list="tablist" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="study" v-show="current === 0">
				<view class="content">
					<view class="box">
						<view class="top">
							<view class="course">
								{{item.name}}
							</view>
						</view>
						<view class="centerProgress" v-if="item.pecent!=100">
							<view class="LineProgress">
								<u-line-progress active-color="#2979ff" :percent="item.pecent"></u-line-progress>
							</view>
							<view class="Progress">
								{{item.pecent}}%
							</view>
						</view>
						<view class="centerProgress" v-if="item.pecent===100">
							<view class="LineProgress">
								<u-line-progress active-color="#53c41a" :percent="item.pecent"></u-line-progress>
							</view>
							<view class="Progress">
								<u-image width="25rpx" height="25rpx" src="../../../static/icon/clear.png"></u-image>
							</view>
						</view>
						<view class="bottom" v-if="leftinfo[select].type === 1">
							<view class="bottomicon">
								<view class="check" @click="loadResource">
									<u-icon name="eye-fill"></u-icon>查看
								</view>
								<view class="download" @click="download(this.leftinfo[this.select].detail.token)">
									<u-icon name="download"></u-icon>下载
								</view>
							</view>
						</view>
						<view class="bottom" v-if="leftinfo[select].type === 2">
							<view class="bottomicon">
								<view class="download" @click="prac">
									<u-icon name="edit-pen-fill"></u-icon>开始练习
								</view>
							</view>
						</view>
						<view class="bottom" v-if="leftinfo[select].type === 3">
							<view class="bottomicon">
								<view class="" v-for="(item,index) in leftinfo[select].detail.files">
									<view class="check" @click="download(item.url)">
										<u-icon name="eye-fill"></u-icon>下载资源{{index+1}}
									</view>
								</view>
								<view class="download" @click="uploadPopup = true">
									<u-icon name="download"></u-icon>上传答案
								</view>
							</view>
						</view>
					</view>
					<view class="record">
						<view class="record">
							<u-table border-color="#FFFFFF">
								<u-tr>
									<u-th>名称</u-th>
									<u-th>学习时长</u-th>
									<u-th>学习时间</u-th>
								</u-tr>
								<u-tr v-for="item in resourceRecords" class="recordBox">
									<u-th>{{item.name1}}</u-th>
									<u-td>
										<view class="recordTime">
											<view class="text">
												{{item.timeDesc}}
											</view>
										</view>
									</u-td>
									<u-td>
										<view class="recordTime-1">
											开始时间:{{item.beginTime}}
											结束时间:{{item.endTime}}
										</view>
									</u-td>
								</u-tr>
							</u-table>
						</view>
					</view>
				</view>
			</view>

			<view class="qa" v-show="current === 1">
				<view class="QAsubsection">
					<u-subsection :list="subsectionlist" :current="QAcur" @change="sectionChange" button-color='#0080d1'
						active-color='#0080d1' mode="button" bg-color='#F5F5F5'></u-subsection>
				</view>
				<view class="" v-if="QAlistLearn.length != 0">
					<view class="QAbox" :key='QAkey'>
						<QAinCource :QAlist="QAlistLearn" @refreshQA='refreshQA'></QAinCource>
					</view>
					<u-loadmore :status="qastatus" />
				</view>
				<view class="empty" v-if="QAlistLearn.length === 0">
					<u-empty text="数据为空" mode="list" icon-size="240" font-size="35"></u-empty>
				</view>
			</view>

			<view class="note" v-show="current === 2">
				<view class="" v-if="notes.length != 0">
					<view class="" :key='noteKey'>
						<note-card v-for="(item,index) in notes" :data='item' :key='index'></note-card>
					</view>
					<u-loadmore :status="notestatus" />
				</view>

				<view class="empty" v-if="notes.length === 0">
					<u-empty text="数据为空" mode="list" icon-size="240" font-size="35"></u-empty>
				</view>
			</view>




			<view class="switchButton">
				<u-button shape="circle" @click="popUp()" v-show="current === 0">切换模式</u-button>
				<u-button shape="circle" @click="addQue()" v-show="current === 1">提问题</u-button>
				<u-button shape="circle" @click="addNote()" v-show="current === 2">记笔记</u-button>
			</view>
			<view>
				<u-popup v-model="popupAddQue" mode="center">
					<view>
						<view class="poptitle">
							<u-field v-model="addQueTitle" label="标题" placeholder="请填写标题">
							</u-field>
						</view>
						<view class="poptext">
							<u-field v-model="addQueText" label="问题内容" placeholder="请填写问题内容" type="textarea">
							</u-field>
						</view>
						<view class="editbutton">
							<button type="default" @click="addQueFinish()">完成</button>
						</view>
					</view>
				</u-popup>
			</view>
			<view>
				<u-popup v-model="popupAddNote" mode="bottom">
					<view>
						<view class="poptext">
							<u-field v-model="noteContent" label="笔记" placeholder="请填写笔记" type="textarea">
							</u-field>
						</view>
						<view class="editbutton">
							<button type="default" @click="addNoteFinish()">完成</button>
						</view>
					</view>
				</u-popup>

				<u-popup v-model="uploadPopup" mode="center" width="60%">
					<view>
						<view class="poptext">
							<u-field v-model="uploadAnswerText" label="上传答案" placeholder="请填写答案" type="textarea">
							</u-field>
						</view>
						<view class="editbutton">
							<button type="default" @click="uploadAnswer()">完成</button>
						</view>
					</view>
				</u-popup>

			</view>
		</view>

		<view>
			<u-popup v-model="popup" mode="left" width="78%">
				<view class="popupbox">
					<view class="weightText">
						第{{this.chapter.chapterId}}节：{{this.chapter.name}}
					</view>
					<view class="resourceList">
						<view class="box" v-for="(item,index) in this.leftinfo" @click="selectChange(index)">
							<view class="top">
								<view class="course">
									{{item.name}}
								</view>
							</view>
							<view class="centerProgress" v-if="item.pecent!=100">
								<view class="LineProgress">
									<u-line-progress active-color="#2979ff" :percent="item.pecent"></u-line-progress>
								</view>
								<view class="Progress">
									{{item.pecent}}%
								</view>
							</view>
							<view class="centerProgress" v-if="item.pecent===100">
								<view class="LineProgress">
									<u-line-progress active-color="#53c41a" :percent="item.pecent"></u-line-progress>
								</view>
								<view class="Progress">
									<u-image width="25rpx" height="25rpx" src="../../../static/icon/clear.png">
									</u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						name: '学习'
					},
					{
						name: '问答'
					},
					{
						name: '笔记'
					}
				],
				QAkey: 0,
				noteKey: 0,
				current: 0,
				tabsHeight: 0,
				dx: 0,
				popup: false,
				popupAddQue: false,
				popupAddNote: false,
				isLearning: true,
				isPractice: false,
				QAcur: 0,
				select: 0,
				subsectionlist: [{
						name: '全部问答'
					},
					{
						name: '我的问答'
					},
					{
						name: '同学问答'
					}
				],
				imgUrl: '',
				chapter: {},
				LearningQAlist: [],
				LearningMyQAlist: [],
				LearningNotMyQAlist: [],
				QAlistLearn: [],
				pracQAlist: [],
				notes: [],
				leftinfo: [{
					name: 'null'
				}, {
					name: 'null'
				}],
				leftResource: [],
				addQueTitle: '',
				addQueText: '',
				noteContent: '',
				qaNum: 6,
				qaPage: 1,
				qastatus: 'loadmore',
				noteNum: 6,
				notePage: 1,
				notestatus: 'loadmore',
				recordNum: 5,
				recorPage: 1,
				theoryRecord: '',
				uploadPopup: false,
				uploadAnswerText: '',
				resourceRecords: []
			}
		},
		watch: {
			select(val, oldVal) {
				this.LearningQAlist = []
				this.LearningMyQAlist = []
				this.LearningNotMyQAlist = []
				this.notes = []
			}
		},
		methods: {
			selectChange(index) {
				this.select = index
				this.QAlistLearn = []
				this.LearningQAlist = []
				this.LearningMyQAlist = []
				this.LearningNotMyQAlist = []
				this.notes = []
				this.popup = false
				if (this.leftinfo[index].type === 1) {
					this.$api.getStudyResourceResult(this.$store.state.access_token, this.leftinfo[index].id, 99999, 1)
						.then(res => {
							console.log(res);
							this.resourceRecords = res.values.records
						})
				} else {

				}
			},
			percentLearn(num) {
				return num * 100
			},
			loadResource(fileIndex) {
				if (this.leftinfo[this.select].type === 3) {
					this.$u.route('pages/webView/webView', {
						url: this.leftinfo[this.select].detail.files[fileIndex].url
					});
				} else {
					this.$u.route('pages/webView/webView', {
						url: this.leftinfo[this.select].detail.url
					});
				}

			},
			change(index) {
				this.current = index;
				if (index === 1) {
					if (!this.LearningQAlist.length) {
						this.$api.getStudyQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, null,
								this.qaNum, this
								.qaPage)
							.then(res => {
								res.values.records.forEach((item, index) => {
									item.imgPath =
										`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
								})
								console.log(res);
								this.LearningQAlist = res.values.records
								this.QAlistLearn = res.values.records
								if (this.QAlistLearn.length < this.qaNum) {
									this.qastatus = 'nomore'
								}
								this.qaPage += 1
							})
					}
				}
				if (index === 2) {
					if (!this.notes.length) {
						this.$api.getStudyNotes(this.$store.state.access_token, this.leftinfo[this.select].id)
							.then(res => {
								this.notes = res.values.records
								if (res.values.records.length < this.noteNum) {
									this.qastatus = 'nomore'
								}

							})
					}
				}
			},
			sectionChange(index) {
				this.QAcur = index;
				this.qaPage = 1
				if (index === 0) {
					this.$api.getStudyQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, null, this
							.qaNum, this.qaPage)
						.then(res => {
							console.log(res);
							res.values.records.forEach((item, index) => {
								item.imgPath =
									`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
							})
							this.LearningMyQAlist = res.values.records
							this.QAlistLearn = res.values.records
							if (this.QAlistLearn.length < this.qaNum) {
								this.qastatus = 'nomore'
							}
						})
				}
				if (index === 1) {
					this.$api.getStudyQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, 1, this
							.qaNum, this.qaPage)
						.then(res => {
							console.log(res);
							res.values.records.forEach((item, index) => {
								item.imgPath =
									`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
							})
							this.LearningMyQAlist = res.values.records
							this.QAlistLearn = res.values.records
							if (this.QAlistLearn.length < this.qaNum) {
								this.qastatus = 'nomore'
							}
						})
				}
				if (index === 2) {
					this.$api.getStudyQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, 2, this
							.qaNum, this.qaPage)
						.then(res => {
							console.log(res);
							res.values.records.forEach((item, index) => {
								item.imgPath =
									`${this.$store.state.base_url}/system/loadImg?imgPath=${encodeURI(item.stuImgPath)}&accessToken=${this.$store.state.access_token}`
							})
							this.LearningMyQAlist = res.values.records
							this.QAlistLearn = res.values.records
							if (this.QAlistLearn.length < this.qaNum) {
								this.qastatus = 'nomore'
							}
						})
				}
				this.QAkey += 1
			},
			popUp() {
				this.popup = true
			},
			refreshQA() {
				this.LearningMyQAlist = []
				this.LearningNotMyQAlist = []
				this.$api.getStudyQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, null, this
						.qaNum, this.qaPage)
					.then(res => {
						if (this.QAcur === 2) {
							this.QAcur = 0
						}
						this.LearningQAlist = res.values.records
						this.QAlistLearn = res.values.records
						this.sectionChange(this.QAcur)
					})
				this.QAkey += 1

			},
			refreshNote() {
				if (this.isLearning) {
					this.notes = []
					this.$api.getStudyNotes(this.$store.state.access_token, this.leftinfo[this.select].id)
						.then(res => {
							console.log(res);
							this.notes = res.values.records
						})
				}
				this.noteKey += 1
			},
			addQue() {
				this.popupAddQue = true
			},
			addNote() {
				this.popupAddNote = true
			},
			addQueFinish() {
				let that = this
				if (!this.addQueTitle) {
					this.$refs.uToast.show({
						title: '标题不能为空',
						type: 'warning'
					})
					return
				}
				if (!this.addQueText) {
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'warning'
					})
					return
				}
				this.$api.addQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, 0, this.addQueText,
						this.addQueTitle)
					.then(res => {
						console.log(res);
						that.$refs.uToast.show({
							title: '提问题成功',
							type: 'success'
						})
						setTimeout(() => {
							that.refreshQA()
							that.addQueText = ''
							that.addQueTitle = ''
						}, 1000)
					})
				this.popupAddQue = false

			},
			addNoteFinish() {
				let that = this
				if (!this.noteContent) {
					this.$refs.uToast.show({
						title: '内容不能为空',
						type: 'warning'
					})
					return
				}
				this.$api.addNotes(this.$store.state.access_token, this.leftinfo[this.select].id, this.noteContent)
					.then(res => {
						console.log(res);
						that.$refs.uToast.show({
							title: '记笔记成功',
							type: 'success'
						})
						setTimeout(() => {
							that.refreshNote()
							that.noteContent = ''
						}, 1000)
						this.popupAddNote = false
					})
			},
			download(downloadToken) {
				let downloadUrl = this.$store.state.base_url.toString() + "/resource/download?token=" + downloadToken
					.toString() +
					"&accessToken=" + this.$store.state.access_token.toString()

				const downloadTask = uni.downloadFile({
					url: downloadUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
						}
						console.log(res);
						// #ifdef  APP-PLUS
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(res) {
								console.log(res)
							}
						});
						//#endif
					}
				});

				// downloadTask.onProgressUpdate((res) => {
				// 	console.log('下载进度' + res.progress);
				// 	console.log('已经下载的数据长度' + res.totalBytesWritten);
				// 	console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				// });
			},
			prac() {
				this.$api.addTheoryRecord(this.$store.state.access_token, this.leftinfo[this.select].id)
					.then(res => {
						this.$u.route('/pages/exam/examTextPage', {
							paperId: res.values,
							examType: 'course'
						})
					})
			},
			uploadAnswer() {
				this.$api.uploadAnswer(this.$store.state.access_token, this.leftinfo[this.select].id, this
						.uploadAnswerText)
					.then(res => {
						console.log(res);
					})
			}


		},
		onLoad(option) {
			this.chapter = option
			this.$api.getStudyStatus(this.$store.state.access_token, option.id)
				.then(res => {
					this.leftinfo = res.values
					this.leftinfo.forEach((item, index) => {
						item.pecent = item.pecent * 100
						this.$api.showTag(this.$store.state.access_token, item.id).then(result => {
							if (result.values.files) {
								this.leftinfo[index].type = 3
							}
							this.leftinfo[index].detail = result.values
						})
					})
					console.log(this.leftinfo);
					this.popup = true
				})
		},
		onReachBottom() {
			if (this.qastatus === 'loadmore') {
				this.qaPage += 1
				this.status = 'loading'
				let isMy
				if (this.QAcur === 0) {
					isMy = null
				}
				if (this.QAcur === 1) {
					isMy = 1
				}
				if (this.QAcur === 2) {
					isMy = 0
				}
				this.$api.getStudyQuestions(this.$store.state.access_token, this.leftinfo[this.select].id, isMy, this
						.qaNum, this.qaPage)
					.then(res => {
						if (res.values.records.length === 0) {
							this.qastatus = 'nomore'
						} else {
							res.values.records.forEach((item, index) => {
								this.QAlistLearn.push(item)
							})
							this.qastatus = 'loadmore'
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $uni-bg-color;
	}

	.pageWrap {
		padding-bottom: 80rpx;
	}

	.study {
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		padding: 25rpx 0;

		.content {
			box-sizing: border-box;
			padding-top: 35rpx;
			width: 100%;

			.box {
				background-color: white;
				box-sizing: border-box;
				padding: 10rpx 10rpx 10rpx 10rpx;
				box-sizing: border-box;
				margin: 10px;
				box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
				border-radius: 5px;

				.top {
					box-sizing: border-box;
					padding-bottom: 15rpx;

					.course {
						box-sizing: border-box;
						padding: 0 5rpx 0rpx 5rpx;
						font-size: 35rpx;
						font-weight: bold;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.bottom {
					color: $theme-color;

					.bottomicon {
						display: flex;
						flex-direction: row-reverse;

						.download {}

						.check {
							padding-left: 15rpx;
						}
					}
				}

				.centerProgress {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.LineProgress {
						box-sizing: border-box;
						padding: 10rpx 5rpx 0rpx 5rpx;
						width: 85%;
					}

					.progress {}
				}




				.bottom {
					display: flex;
					flex-direction: row-reverse;
					box-sizing: border-box;
					padding-top: 15rpx;

					.time {
						color: #BED3ED;
					}
				}
			}
		}

		.record {
			box-sizing: border-box;
			border: 1rpx solid;
		}
	}

	.switchButton {
		position: fixed;
		right: 15rpx;
		bottom: 15rpx;
	}

	.popupbox {
		box-sizing: border-box;
		padding: 15rpx 15rpx 15rpx 15rpx;

		.weightText {
			box-sizing: border-box;
			padding-bottom: 35rpx;
			font-weight: bold;
			font-size: 40rpx;
		}

		.resourceList {
			.box {
				background-color: white;
				box-sizing: border-box;
				padding: 10rpx 10rpx 10rpx 10rpx;
				box-sizing: border-box;
				margin: 10px;
				box-shadow: 0 0 5px 1px rgba($color: #000000, $alpha: 0.1);
				border-radius: 5px;

				.top {
					box-sizing: border-box;
					padding-bottom: 15rpx;

					.course {
						box-sizing: border-box;
						padding: 0 5rpx 0rpx 5rpx;
						font-size: 35rpx;
						font-weight: bold;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.centerProgress {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.LineProgress {
						box-sizing: border-box;
						padding: 10rpx 5rpx 0rpx 5rpx;
						width: 85%;
					}

					.progress {}
				}




				.bottom {
					display: flex;
					flex-direction: row-reverse;
					box-sizing: border-box;
					padding-top: 15rpx;

					.time {
						color: #BED3ED;
					}
				}
			}
		}
	}

	.empty {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.recordBox {
		border: 2rpx solid #000000;
	}

	.recordTime {
		box-sizing: border-box;
		font-weight: bold;
		padding-top: 55rpx;

		.text {
			box-sizing: border-box;
		}
	}
</style>
